<template>
	<div>
		dd
		<!-- Vue的router-view -->
		<keep-alive>
			<router-view></router-view>
		</keep-alive>

		<!-- iframe页 -->
		<component
			v-for="item in hasOpenComponentsArr"
			:key="item.name"
			:is="item.name"
			v-show="$route.path === item.path"
		></component>
	</div>
</template>

<script>
import Vue from "vue";
export default {
	name: "IframeRouterView",
	created() {
		// 设置iframe页的数组对象
		const componentsArr = this.getComponentsArr();
		componentsArr.forEach(item => {
			Vue.component(item.name, item.component);
		});
		this.componentsArr = componentsArr;
		// 判断当前路由是否iframe页
		this.isOpenIframePage();
	},
	data() {
		return {
			iframeArr: [],
			componentsArr: [] // 含有iframe的页面
		};
	},
	watch: {
		$route() {
			// 判断当前路由是否iframe页
			this.isOpenIframePage();
		}
	},
	computed: {
		// 实现懒加载，只渲染已经打开过（hasOpen:true）的iframe页
		hasOpenComponentsArr() {
			return this.componentsArr.filter(item => item.hasOpen);
		}
	},
	methods: {
		// 根据当前路由设置hasOpen
		isOpenIframePage() {
			const target = this.componentsArr.find(item => {
				return item.path === this.$route.path;
			});
			console.log(target);
			if (target && !target.hasOpen) {
				target.hasOpen = true;
			}
		},
		// 取出 把含有iframeComponent标识的收集起来
		filterIframeRoutes(routes) {
			routes.forEach(route => {
				const tmp = { ...route };
				if (tmp && tmp.url && tmp.iframeComponent === "true") {
					this.iframeArr.push(tmp);
				}

				if (tmp.children) {
					tmp.children = this.filterIframeRoutes(tmp.children);
				}
			});
		},
		// 1. 遍历路由的所有页面，取出 把含有iframeComponent标识的收集起来
		getComponentsArr() {
			const router = this.$router;
			const routes = router.options.routes;
			this.filterIframeRoutes(routes);
			console.log(this.iframeArr, "this.iframeArr :");
			return this.iframeArr.map(item => {
				return {
					name: item.name,
					path: item.path,
					hasOpen: false, // 是否打开过，默认false
					component: () => import("@/components/iframes"), // 组件文件的引用
					url: item.url,
					component: item.iframeComponent // 组件文件的引用
				};
			});
		}
	}
};
</script>

<style>
</style>